<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Histogram</title>
	<script src="../libs/d3.v4.js"></script>
	<script src="../libs/d3-contour.v1.min.js"></script>
	<style>
		body{
			margin: 0px;
		}
		svg{
			border:2px #ccc solid;
		}
		path{
			fill:none;
			stroke:#ccc;
		}
	</style>
</head>
<body>
	<svg></svg>
	<script>
		window.onload = () => {
			var w = 1000,
				h = 700,
				svg = d3.select("svg").attr("width", w).attr("height", h);


			var n = 512,
				m = 256,
				values = new Array(n * m),
				contour = d3.contours().size([n, m]).smooth(false)
				projection = d3.geoProjection(function(x, y) {
					return [x,y]
				})

			var geo = d3.geoPath();


			for (var j = 0.5, k = 0; j < m; ++j) {
				for (var i = 0.5; i < n; ++i, ++k) {
					values[k] = goldsteinPrice(i / n * 4 - 2, 1 - j / m * 3);
				}
			}

			function goldsteinPrice(x, y) {
				return (1 + Math.pow(x + y + 1, 2) * (19 - 14 * x + 3 * x * x - 14 * y + 6 * x * x + 3 * y * y)) * (30 + Math.pow(2 * x - 3 * y, 2) * (18 - 32 * x + 12 * x * x + 48 * y - 36 * x * y + 27 * y * y));
			}

			svg.selectAll("path")
				.data(contour(values))
				.enter().append("path")
				.attr("d", geo)

			console.log(contour(values))
		}
	</script>
</body>
</html>